<template>
  <div>
    <el-dialog :title="maintitle" :visible.sync="dialogVisible" width="80%">
      <el-form labelWidth="150px">
        <!-- <div>{{laborData}}</div> -->
        <el-form-item label="姓名" class="is-required">
          <searchperson @getpersonid="getpersonid" :itempersonid="laborData.hash.pid"></searchperson>
          <div class="el-form-item__error" v-if="!$v.laborData.hash.pid.required">
            请输入姓名
          </div>
        </el-form-item>
        <el-form-item label="合同号" class="is-required">
          <el-input v-model="laborData.hash.cnumber" v-if="chousebtn == '2'" disabled></el-input>
          <el-input v-model="laborData.hash.cnumber" v-else-if="chousebtn == '1'" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.laborData.hash.cnumber.required">
            请输入合同号
          </div>
          <!-- <div class="el-form-item__error" v-if="!$v.laborData.hash.cnumber.alphaNum">
            合同号格式不正确
          </div> -->
        </el-form-item>

        <el-form-item label="合同时间" class="is-required">
          <el-date-picker
            v-model="laborData.hash.begintime"
            style="width:100%"
            type="date"
            placeholder="开始日期"
            valueFormat="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <el-date-picker
            v-model="laborData.hash.endtime"
            style="width:100%"
            type="date"
            placeholder="结束日期"
            valueFormat="yyyy-MM-dd"
            clearable
          >
            <!-- :picker-options="pickerOptions1" -->
          </el-date-picker>
          <div class="el-form-item__error" v-if="!$v.laborData.hash.begintime.required">
            请选择合同时间
          </div>
        </el-form-item>
        <el-form-item label="合同类型" class="is-required">
          <el-select v-model="laborData.hash.ctype" placeholder="请选择" style="width:100%" clearable>
            <el-option
              v-for="item in itemdata"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.laborData.hash.ctype.required">
            请选择合同类型
          </div>
        </el-form-item>
        <el-form-item label="上传附件">
          <upload2 :filelimit="5" :filelink.sync="filelink" :ispic="false" :isedit="false"></upload2>
        </el-form-item>
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addlabor">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from '~/components/common/searchperson.vue';
import upload2 from '~/components/common/upload2.vue';
import { required, alphaNum } from 'vuelidate/lib/validators';

export default {
  validations: {
    laborData: {
      hash: {
        pid: {
          required,
        },
        cnumber: {
          required,
        },
        begintime: {
          required,
        },

        ctype: {
          required,
        },
      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      ts: this.newStore(),
      disable: false,
      maintitle: '添加合同',
      laborData: {
        cols: [],
        hash: {
          username: '',
          cnumber: '',
          begintime: '',
          endtime: '',
          ctype: '',
          pid: '',
          id: '',
        },
      },
      filelink: [],
      changeval: 0,
      laborlist: [],
      fielname: [],
      fileurl: [],
      // signaturearr: []
    };
  },
  props: {
    itemdata: Array,
    itemvalname: Object,
    chousebtn: Number,
  },
  components: {
    upload2,
    searchperson,
  },
  created() {
    this.getlaborval();
    if (this.chousebtn == 2) {
      this.maintitle = '修改合同';
      this.disable = true;
      this.fileminlink = [];
      this.filelink = [];
      const req = {
        handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
        filetype: 'contract',
        mainid: this.itemvalname.hash.cnumber,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.fileminlink = ts.d.data.operation1;

        for (let i = 0; i < this.fileminlink.length; i += 1) {
          const a = {};
          a.name = this.fileminlink[i].hash.filename;
          a.url = this.fileminlink[i].hash.fileurl;
          this.filelink.push(a);
        }
      });
    }
  },
  mounted() {
    this.getlaborval();
    // this.signaturearr=[]
  },
  methods: {
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    // 渲染信息
    getlaborval() {
      // console.log(this.itemvalname, '222');
      if (this.itemvalname == '' || this.itemvalname == undefined) {

      } else if (this.chousebtn == 2) {
        this.laborData = {};
        // console.log(this.itemvalname, "1");
        // console.log(this.laborData, "2");
        this.laborData = this.itemvalname;
        // console.log(this.laborData, "3");
      }
    },
    // 获取姓名
    getpersonid(val) {
      this.changeval = 1;
      this.laborData.hash.pid = val.id;
      this.laborData.hash.username = val.value;
      // console.log(val,'7777')
    },
    // 增加/编辑合同信息
    addlabor() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该劳动合同信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                '09D3B9E20F101E11DEFE3350091AFF9B724AECA2C1F5AF2447CFE95914E193A6',
              username: this.laborData.hash.username,
              cnumber: this.laborData.hash.cnumber,
              begintime: this.laborData.hash.begintime,
              endtime: this.laborData.hash.endtime,
              ctype: this.laborData.hash.ctype,
              pid: this.laborData.hash.pid,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              // console.log(req, '111');

              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              this.$parent.getlaborlist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      } else if (this.chousebtn == 2) {
        this.$confirm('是否修改该劳动合同信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const req = {
              handle:
                '09D3B9E20F101E11DEFE3350091AFF9B724AECA2C1F5AF246A7218A1DEF1295D',
              username: this.laborData.hash.username,
              cnumber: this.laborData.hash.cnumber,
              begintime: this.laborData.hash.begintime,
              endtime: this.laborData.hash.endtime,
              ctype: this.laborData.hash.ctype,
              pid: this.laborData.hash.pid,
              id: this.laborData.hash.id,
              fielname: this.postname(this.filelink),
              fileurl: this.posturl(this.filelink),
            };
            this.spost(this.ts, '/mainservlet', req).then((ts) => {
              // console.log(ts.d);
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              // this.$emit("update:addlabor", this.laborData);
              this.$parent.getlaborlist();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
</style>
